<!DOCTYPE html>
<html>
<head>
	<title>国际摄影展示首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/vendor.css">
    <link rel="stylesheet" type="text/css" href="fonts/icomoon/icomoon.css">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body class="bg-black">

<div class="preloader">
	<svg>
	  <g>
	    <path d="M 50,100 A 1,1 0 0 1 50,0"/>
	  </g>
	  <g>
	    <path d="M 50,75 A 1,1 0 0 0 50,-25"/>
	  </g>
	  <defs>
	    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
	      <stop offset="0%" style="stop-color:#FF56A1;stop-opacity:1" />
	      <stop offset="100%" style="stop-color:#FF9350;stop-opacity:1" />
	    </linearGradient>
	  </defs>
	</svg>
</div>

<div class="nav nav-overlay">
	<div class="nav__content">
		<ul class="nav__list">
			<li class="nav__list-item active-nav"><a href="index.html" class="hover-target">首页</a></li>
			<li class="nav__list-item"><a href="portfolio.html" class="hover-target">作品</a></li>
			<li class="nav__list-item"><a href="styles.html" class="hover-target">风格</a></li>
			<li class="nav__list-item"><a href="blog.html" class="hover-target">博客</a></li>
			<li class="nav__list-item"><a href="single-post.html" class="hover-target">评论</a></li>
			<li class="nav__list-item"><a href="contact.html" class="hover-target">联系</a></li>
		</ul>
	</div>
</div>

<header id="header" class="light">
	<div id="header-wrap">
		<nav id="navbar">
			<div class="main-logo">
				<a href="index.html">摄影</a>
			</div>
			<div class="action-menu">
			  <input id="menu-toggle" type="checkbox" />
				<label class="menu-btn" for="menu-toggle">
				<span></span>
			   </label>
			</div><!--action-menu-->
		</nav>
	</div><!--header-wrap-->
</header>

<div id="billboard">
	<div class="container">
		<div class="row">
			<div class="billboard-content d-flex mt-6 align-center">
				
				<div class="light text-center">
					<h1 class="section-title mb-4">Hi, <strong>摄影师</strong></h1>
					
					<span class="designation typewrite" data-period="500" data-type='[ "国际摄影展示", "国际摄影交流", "照片浏览" ]'></span>
					<p class="pt-3">关于国际摄影的作品以及产品展示</p>

					<div class="button-container d-flex justify-content-center mt-5">
						
						<a href="#" class="btn btn-pill btn-large btn-outline-light mr-3"><span>查看产品组合</span><i class="icon icon-arrow-down2"></i></a>
						
						<a href="#" class="btn btn-pill btn-large btn-outline-light mr-3"><span>联系我们</span><i class="icon icon-arrow-down2"></i></a>

					</div><!--button-box-->
				</div><!--text-content-->

				<div class="social-links">
					<ul class="list-unstyled d-flex">
						<li class="mr-3"><a href="#"><i class="icon icon-facebook m-1"></i></a></li>
						<li class="mr-3"><a href="#"><i class="icon icon-instagram m-1"></i></a></li>
						<li class="mr-3"><a href="#"><i class="icon icon-behance m-1"></i></a></li>
						<li><a href="#"><i class="icon icon-pinterest-p m-1"></i></a></li>
					</ul>
				</div><!--social-links-->
			</div>
		</div>
	</div>
</div><!--billboard-->

<section class="portfolio-wrap fancyboxeffect light padding-medium">

	
		<div class="d-flex flex-wrap col-md-12">
	<div class="portfolio-container">
			<div>
				<a class="image-link" rel="gallery" href="images/model14.png">
					<img src="images/model14.png" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model16.jpg">
					<img src="images/model16.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/largemodel3.jpg">
					<img src="images/model3.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/photographer.jpg">
					<img src="images/photographer.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model42.jpg">
					<img src="images/model42.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model22.jpg">
					<img src="images/model22.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model20.jpg">
					<img src="images/model20.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/largemodel13.jpg">
					<img src="images/model13.jpg" alt="model" class="galleryImg">
				</a>
			</div>

			<div>
				<a class="image-link" href="images/model17.jpg">
					<img src="images/model17.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model19.jpg">
					<img src="images/model19.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/largemodel11.jpg">
					<img src="images/largemodel11.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/largemodel2.jpg">
					<img src="images/model2.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/female-photographer.jpg">
					<img src="images/female-photographer.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model27.jpg">
					<img src="images/model27.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model28.jpg">
					<img src="images/model28.jpg" alt="model" class="galleryImg">
				</a>
			</div>

			<div>
				<a class="image-link" href="images/largemodel1.jpg">
					<img src="images/model1.jpg" alt="model" class="galleryImg">
				</a>
			</div>
			<div>
				<a class="image-link" href="images/model29.jpg">
					<img src="images/model29.jpg" alt="model" class="galleryImg">
				</a>
			</div>

	</div>
		</div><!--col-md-12-->
	
	<div class="pix_btn btn-click text-center">
		<a href="#" class="btn btn-pill btn-large btn-outline-light mr-3"><span>查看全部</span> 
		<i class="icon icon-arrow-thin-right"></i></a>
	</div>

</section>

<section class="about-us bg-grey light padding-xlarge">
	<div class="container">
		<div class="row">
		<div class="border-top-right"></div><!--border-top-right-->
		<div class="border-left-bottom"></div><!--border-left-bottom-->	
			<div class="section-header text-center">
				<h2 class="section-title mb-5">关于摄影</h2>
				<p>
					摄影术的出现对传统文化(尤其是以文学话语为主导的传统文化)
					所形成的冲突、挑战，以及所引发的理论思考，对视觉文化的人文性质、人文意义和伴随着视觉文化的兴起、
					兴盛所出现的各种问题...从摄影术发展初期画家和雕塑家对摄影术极力的反对，报纸连篇累牍地载文登画，
					对摄影术进行非议和讽刺到当今社会一种主导性的、全面覆盖性的图像社会或视觉文化时代。
					不得不让我们去思考摄影的意义是什么。
				</p>
				<p>
					摄影只是艺术语言表达的一种“方式”、一种“手段”，摄影同其他其他艺术传达形式
					（一种或多元思想、情绪、文化、商业形式等的载体）在本质并无明显区别，形式不同但本质相同。
				</p>
			</div>
			<div class="pg-features flex-container mt-4">
				<ul class="list-unstyled m-auto d-flex text-uppercase">
					<li><a href="#">国际</a><i class="icon icon-star"></i></li>
					<li><a href="#">婚礼</a><i class="icon icon-star"></i></li>
					<li><a href="#">时尚</a></li>
				</ul>
			</div><!--pg-features-->
		</div>
		<div class="pix_btn btn-click text-center mt-5">
			<a href="#" class="btn btn-pill btn-large btn-outline-light mr-3" data-hover="click"><span>加入我们</span> 
			<i class="icon icon-check"></i></a>
		</div>
	</div>
</section>

<footer id="footer" class="bg-black light padding-xlarge" style="background-image: url(images/photography.jpg);background-position: right;background-repeat: no-repeat;">
	
	<div class="container">
		<div class="row">
		
			<div class="contact-information mt-4 d-flex">
				
				<div class="contact-detail col-md-6">
					
					<div class="detail mr-6 mb-4">
						<ul class="list-unstyled colored-grey text-large">
							<li>中国 陕西省 汉中市</li>
							<li>+86 18391636123 / +1 561-334-0580</li>
							<!-- <li><a href="mailto:info@yourcompany.com" class="colored">info@yourcompany.com</a></li> -->
							<li>© 2024 摄影 版权所有</li>
							<!-- <li><a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></li> -->
						</ul>
					</div><!--detail-->
					
				</div><!--contact-detail-->

				<div class="col-md-6 p-0">
					<div class="container">
						<div class="row">
							<h3>快速联系</h3>
							<form action="contact.php" class="contact-form d-flex flex-wrap mt-4">
								<input type="text" name="用户名" placeholder="用户名" class="name mb-3" required>
								<input type="text" name="电子邮件/手机号码" placeholder="电子邮件/手机号码" class="mb-3" required>
								<textarea placeholder="内容" style="height: 150px;" required></textarea>
								
								<div class="pix_btn btn-click text-center mt-5">
									<button type="submit" href="#" class="btn btn-pill btn-large btn-outline-light mr-3" data-hover="click"><span>发送消息</span> 
									<i class="icon icon-paper-plane"></i></button>
								</div>
							</form>
						</div>
					</div>
				</div>	<!--col-md-6-->		

			</div><!--contact-information-->
		</div>
	</div>
</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</body>
</html>